'use client';

import type { IMenu, ISubmenu } from '@/interfaces';
import { MENU_TYPE_KEY } from '@/lib/constant';
import classNames from 'classnames';
import { useQuery } from '@tanstack/react-query';
import { querySubmenuDetails } from '@/services/api';
import { useState } from 'react';
import { formatDate } from '@/lib/tool';
import Alert from '@/app/[locale]/alert/alert';
import AlertLoad from '@/app/[locale]/alert/load';

export default function QueryMenuSubmenu(
  this: any,
  { details }: { details: IMenu },
) {
  const [currentSubmenuItemId, setCurrentSubmenuItemId] = useState<number>();

  function onClickDetail(item: ISubmenu) {
    setCurrentSubmenuItemId(item.id);
  }

  return (
    <>
      <div className="col">
        <div className="row">
          <div className="col">
            <div className="card">
              <div className="card-header bg-transparent text-muted">
                <i className="bi bi-list-nested me-2"></i>
                子菜单
              </div>
              <div className="card-body">
                <div className="table-responsive">
                  <table className="table table-hover align-middle">
                    <thead>
                      <tr className="text-nowrap">
                        <th scope="col" className="w-10 fw-normal">
                          ID
                        </th>
                        <th scope="col" className="w-10 fw-normal">
                          名称
                        </th>
                        <th scope="col" className="w-10 fw-normal">
                          路径
                        </th>
                        <th scope="col" className="w-10 fw-normal">
                          排序
                        </th>
                        <th scope="col" className="w-10 fw-normal">
                          类型
                        </th>
                        <th scope="col" className="w-10 fw-normal"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {details.submenus.map((item) => {
                        return (
                          <tr
                            key={item.id}
                            className={classNames('text-nowrap', {
                              'table-active': currentSubmenuItemId === item.id,
                            })}
                          >
                            <td
                              className="cursor-pointer"
                              onClick={onClickDetail.bind(this, item)}
                            >
                              {item.id}
                            </td>
                            <td
                              className="cursor-pointer"
                              onClick={onClickDetail.bind(this, item)}
                            >
                              {item.name}
                            </td>
                            <td
                              className="cursor-pointer"
                              onClick={onClickDetail.bind(this, item)}
                            >
                              {item.path}
                            </td>
                            <td
                              className="cursor-pointer"
                              onClick={onClickDetail.bind(this, item)}
                            >
                              {item.sort}
                            </td>
                            <td
                              className="cursor-pointer"
                              onClick={onClickDetail.bind(this, item)}
                            >
                              {MENU_TYPE_KEY[item.menuType]}
                            </td>
                            <td>
                              <button
                                onClick={onClickDetail.bind(this, item)}
                                className="btn btn-sm btn-light"
                                type="button"
                              >
                                <i className="bi bi-info-square me-2"></i>
                                查看
                              </button>
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>

                {details.submenus.length === 0 && (
                  <div className="text-center text-muted">暂无子菜单</div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

      {currentSubmenuItemId && (
        <div className="col">
          {currentSubmenuItemId && (
            <QuerySubmenuInfo currentSubmenuItemId={currentSubmenuItemId} />
          )}
        </div>
      )}
    </>
  );
}

const QuerySubmenuInfo = ({
  currentSubmenuItemId,
}: {
  currentSubmenuItemId: number;
}) => {
  const querySubmenuDetailsQuery = useQuery(
    ['/submenus', currentSubmenuItemId],
    async (context) => {
      return (await querySubmenuDetails({
        id: context.queryKey[1] + '',
      })) as ISubmenu;
    },
  );

  if (querySubmenuDetailsQuery.data) {
    const data = querySubmenuDetailsQuery.data;

    return (
      <div className="row">
        <div className="col">
          <div className="card">
            <div className="card-header bg-transparent text-muted">
              <i className="bi bi-info-square me-2"></i>
              {data.name}
            </div>
            <div className="card-body">
              <div className="table-responsive">
                <table className="table table-hover align-middle table-striped">
                  <thead>
                    <tr className="text-nowrap">
                      <th scope="col" className="fw-normal">
                        ID
                      </th>
                      <th scope="col" className="fw-normal">
                        {data.id}
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {Object.keys(data)
                      .filter(
                        (item) => !['id', 'submenus', 'menu'].includes(item),
                      )
                      .map((item) => {
                        return (
                          <tr key={item} className="text-nowrap">
                            <td>
                              {item === 'createdBy' && '创建用户'}

                              {item === 'updatedBy' && '更新用户'}

                              {item === 'creatorAlias' && '创建者别名'}

                              {item === 'updaterAlias' && '更新者别名'}

                              {item === 'createdOn' && '创建时间'}

                              {item === 'updatedOn' && '更新时间'}

                              {item === 'deleted' && '是否删除'}

                              {item === 'name' && '菜单名称'}

                              {item === 'path' && '菜单路径'}

                              {item === 'sort' && '菜单排序'}

                              {item === 'type' && '菜单级别'}

                              {item === 'menuType' && '菜单类型'}
                            </td>
                            <td>
                              {item === 'createdBy' && data[item]}

                              {item === 'updatedBy' && data[item]}

                              {item === 'creatorAlias' && data[item]}

                              {item === 'updaterAlias' && data[item]}

                              {item === 'createdOn' && formatDate(data[item])}

                              {item === 'updatedOn' && formatDate(data[item])}

                              {item === 'deleted' && data[item] + ''}

                              {item === 'name' && data[item]}

                              {item === 'path' && data[item]}

                              {item === 'sort' && data[item]}

                              {item === 'type' &&
                                (data[item] === 1 ? '主菜单' : '子菜单')}

                              {item === 'menuType' &&
                                (data[item] === 'LINK' ? '链接' : '按钮')}
                            </td>
                          </tr>
                        );
                      })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (querySubmenuDetailsQuery.error) {
    return <Alert type="error" message={querySubmenuDetailsQuery.error} />;
  }

  return <AlertLoad />;
};
